<template>
  <div class="line-chart">
    <div class="echart-title">
      <span>{{ $attrs.groupLabel }}中风险数量变化趋势</span>
      <el-radio-group size="mini" @change="timeChange" v-model="timeRangeVal">
        <el-radio-button v-for="item in timeRange" :key="item.value" :label="item.value">{{
          item.label
        }}</el-radio-button>
      </el-radio-group>
    </div>
    <div id="line" ref="lineChart"></div>
  </div>
</template>

<script>
import echarts from "./index.js";
import { assetDetailChartApi } from "api/api";
export default {
  name: "lineChart",
  props: {},
  components: {},
  data() {
    return {
      timeRangeVal: 7,
    };
  },
  created() {
    this.timeRange = [
      { label: "近30天", value: 30 },
      { label: "近7天", value: 7 },
    ];
    this.assetDetailChart();
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.lineChart);
    //监听屏幕变化时自适应图表
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    timeChange() {
      this.assetDetailChart();
    },
    assetDetailChart() {
      assetDetailChartApi({ ...this.$attrs.params(), days: this.timeRangeVal }).then((res) => {
        let data = res.data;
        let nums = [];
        let dates = [];
        data.forEach((item) => {
          dates.push(item.name);
          nums.push(item.count);
        });
        this.initOption(nums, dates);
      });
    },

    initOption(nums, dates) {
      this.option = {
        grid: { top: 20, left: 60, right: 40 },
        tooltip: { triggle: "axios" },
        xAxis: { type: "category", data: dates },
        yAxis: { type: "value" },
        series: [{ data: nums, type: "line" }],
      };
      this.myChart.setOption(this.option);
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.echart-title {
  span {
    margin-right: 20px;
  }
}
#line {
  height: 300px;
}
</style>
